import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import { Icon, Button, InputItem, Picker, List, ImagePicker } from 'antd-mobile'
import {Link} from 'react-router'
import city from "../../../assets/js/city";
const Item = List.Item;
export default class Home extends React.Component {
    static contextTypes = {
        router: PropTypes.object.isRequired
    }
    constructor(props) {
        super(props);
        this.state = {
            varname: '王XX',
            idcard: '319938********8390',
            dlname: '',
            dlcard: '',
            isMyself: [1]
        };
    }
    componentWillMount() {
        //获取token
    }
    toAgreement=()=>{
        this.context.router.push({
            pathname: '/RentHouse/Agreement'
        })

    }
    isMyselfFun = (val) => {
        let varname = '王XX';
        let idcard = '319938********8390';
        var dlname = '李X';
        var dlcard = '503298********0938';
        if (val.join(',') === '1') {
            dlname = '';
            dlcard = '';
        } else if (val.join(',') === '0') {
            varname = '';
            idcard = '';
        }
        this.setState({
            isMyself: val,
            varname: varname,
            idcard: idcard,
            dlname: dlname,
            dlcard: dlcard,
        });
        // console.log('v:', val, val.join(','));
    };
    render() {
        let height = $(window).height()-50;
        let money = localStorage.getItem('houseMoney');
        let address = localStorage.getItem('houseAddress');
        let area = localStorage.getItem('houseArea');
        let isMyselfArr = [
            { label: '是', value: 1 },
            { label: '否', value: 0 }
        ];

        return(
            <div >
                <CommonHeader name='信息确认' leftContentTitle="@back" />
                <div className='confirmInfo' style={{height:height+'px',background:'#f7f7f7'}}>
                    <div className='houseInfo'>
                        <img src="./imgs/zz1.png" alt=""/>
                        <div>
                            <span>{address}</span>
                            <p>{money}<span>{area}</span></p>
                        </div>
                    </div>
                    <h2>签约主体信息</h2>
                    {/*<ul>*/}
                        {/*<li>姓名<span>王XX</span></li>*/}
                        {/*<li>性别<span>男</span></li>*/}
                        {/*<li>身份证号码<span>341xxxxxxxxxxxx11</span></li>*/}
                        {/*<li>手机号<span>13211111111</span></li>*/}
                    {/*</ul>*/}
                    <div>
                        <Picker data={ isMyselfArr } cols={1}
                                value={this.state.isMyself}
                                onChange={ this.isMyselfFun }
                                onOk={ this.isMyselfFun }
                        >
                            <Item arrow="horizontal">是否本人租房</Item>
                        </Picker>
                        <InputItem clear placeholder="租房人姓名"
                                   value={this.state.varname}
                                   onChange={ val => {this.setState({varname: val})} }>
                            租房人姓名：
                        </InputItem>
                        <InputItem clear placeholder="租房人证件号码"
                                   value={this.state.idcard}
                                   onChange={ val => {this.setState({idcard: val})} }>
                            租房人证件号码：
                        </InputItem>
                        <InputItem clear placeholder="代理人姓名"
                                   value={this.state.dlname}
                                   onChange={ val => {this.setState({dlname: val})} }>
                            代理人姓名：
                        </InputItem>
                        <InputItem clear placeholder="代理人证件号码"
                                   value={this.state.dlcard}
                                   onChange={ val => {this.setState({dlcard: val})} }>
                            代理人证件号码：
                        </InputItem>
                    </div>
                    <h2>上传租房人证件影像</h2>
                    <ImagePicker
                        files={this.state.files}
                        onChange={files => this.setSate({  files })}
                        onImageClick={(index, fs) => console.log(index, fs)}
                    />
                </div>
                {/*<div className='confirmFoot' onClick={this.toAgreement.bind(this)}>确认信息</div>*/}
                <div className="btnGroup-one-fixed">
                    <Button type="primary" className="btnGroup-one-fixed-btn"
                            onClick={this.toAgreement.bind(this)}>确认信息</Button>
                </div>

            </div>
        )
    }

}